<template>
	<view class="content">
		<view class="header">
			<image class="head-logo" src=""></image>
		</view>
		<view class="touxiang">
			<view class="picture">
				<image class="logo" src="../../static/icons/girl_face.png"></image>
			</view>
		</view>
		<view class="text-area">
			<view class="input_view">

				<!-- <text class="iconfont icon-shenfen-"></text> -->
				<image class="user-icon" src="../../static/icons/id.png"></image>
				<!-- <image style="width: 70rpx;height: 60rpx; margin-left: 15rpx"src="../../static/icons/inputId.png"></image> -->
				<input placeholder="请输入用户名" type="text" v-model="input.account" />

			</view>
			<view>
				<image class="line-icon" src="../../static/icons/line.png"></image>
			</view>
			<view class="input_view">
				<!-- <text  class="iconfont icon-suo"></text> -->
				<image class="password-icon" src="../../static/icons/password.png"></image>
				<input placeholder="请输入密码" type="text" v-model="input.password" />
			</view>
			<view>
				<image class="line-icon" src="../../static/icons/line.png"></image>
			</view>
			<view class="forget-visitor-view">
				<navigator class="forgetPassword" url="./register" open-type="navigate">忘记密码</navigator>
				<text class="visitorLogin">游客登录</text>
			</view>
			<view>
				<button class="logButton" type="default" @click="login">
					登录
				</button>
			</view>
			<view class="picture2">
				<image class="logo2" src="../../static/icons/test.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		studentLogin
	} from '../../api/file.js';
	export default {
		data() {
			return {
				url: "/login/student",
				input: {
					account: '', //账号
					password: '' //密码
				},
			}
		},
		onLoad() {},
		methods: {
			login() {
				// 请求接口进行登录验证
				studentLogin(this.input).then(res => {
					if (res.data.code === 200) {
						//console.log(res.data);
						uni.setStorageSync('token', res.data.data
							.token); //将拿到的token，stuNumber，classId放入uniApp的缓冲区，防止刷新消失
						uni.setStorageSync('studentNum', res.data.data.stuNumber);
						uni.setStorageSync('classId', res.data.data.classId);
						uni.navigateTo({
							url: "../testList/testList", //跳转页面
						})
					} else { //弹出警告消息窗
						uni.showToast({
							title: "请检查用户名和密码是否正确",
							icon: 'none',
							duration: 2000
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-icon {
		width: 60rpx;
		height: 60rpx;
		margin-right: 15rpx
	}

	.line-icon {
		height: 2rpx;
		width: 400rpx;
		margin-top: 10rpx;
	}

	.password-icon {
		width: 60rpx;
		height: 60rpx;
		margin-right: 15rpx;
	}

	.forget-visitor-view {
		width: 400rpx;
		height: 40rpx;
		margin-top: 30rpx;
		display: flex;
	}

	.forgetPassword {
		width: 200rpx;
		height: 40rpx;
		color: #006EEE;
	}

	.visitorLogin {
		width: 200rpx;
		height: 40rpx;
		text-align: right;
		color: #666666;
	}

	.logButton {
		width: 400rpx;
		height: 80rpx;
		margin-top: 25rpx;
		background-color: #007AFF;
		color: #FFFFFF;
		letter-spacing: 5rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 32rpx;
	}

	.input_view {
		margin-top: 20rpx;
		margin-left: 5rpx;
		display: flex;
		border: #000000, solid, 1rpx;
		height: 50rpx;
		line-height: 50rpx;
	}

	.picture {
		margin-top: 50rpx;
		height: 150rpx;
		border-radius: 80rpx;
		/* width: 20rpx; */
		margin: auto;
		background-color: #3967FF;
	}

	.touxiang {
		margin-top: 50rpx;
		height: 200rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 150rpx;
		width: 150rpx;
		/* padding-top: 200rpx; */
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.iconfont {
		color: #5fadff;
		font-size: 60rpx;
		width: 80rpx;
	}

	.input {
		width: 300rpx;
		border: #000000, solid, 1rpx;
	}

	.text-area {
		/* display: flex; */
		width: 375rpx;
		height: 500rpx;
		/* justify-content: center; */
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	//课设修改图标
	.header {
		margin-button: 0rpx;
	}

	.head-logo {
		width: 500rpx;
		height: 175rpx;
	}

	.picture2 {
		margin-top: 50rpx;
		margin-right: 40rpx;
		// width: 600rpx;
		// height: 500rpx;
	}

	.logo2 {
		width: 480rpx;
		height: 400rpx;

	}
</style>
